<template>
  <div class="maine">
    <el-form ref="ruleForm" :model="infoForm" label-width="80px" size="mini " :rules="infoRules">
      <el-form-item label="姓名:" prop="name">
        <el-input v-model="infoForm.name" placeholder="请输入您的姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号码:" prop="phone">
        <el-input v-model="infoForm.phone" placeholder="请输入您的手机号码" type="number"></el-input>
      </el-form-item>
      <el-form-item label="公司/学校:">
        <el-input v-model="infoForm.school" placeholder="请输入您的公司/学校"></el-input>
      </el-form-item>
      <el-form-item label="地址:">
        <el-input v-model="infoForm.diqu" placeholder="请输入您的地址"></el-input>
      </el-form-item>
      <el-form-item label="需求:">
        <el-input type="textarea" v-model="infoForm.demand" placeholder="请输入您的需求"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getaddExhibitionUser('ruleForm')">提交信息</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addExhibitionUser } from "@/api/allocation.js";
export default {
  data() {
    var phoneReg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('号码不能为空!!'))
      }
      if (!phoneReg.test(value)) {
        callback(new Error('手机号码有误'))
      } else {
        callback()
        
      }
    };
    return {
      infoForm: { name: '', phone: '', school: '', diqu: '', demand: '' },
      infoRules: {
        name: [{ required: true, trigger: "blur", message: "请输入您的姓名" }],
        phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
      }
    }
  },
  methods: {
    getaddExhibitionUser(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let infoForm = JSON.parse(JSON.stringify(this.infoForm))
          addExhibitionUser(infoForm).then(res => {
            this.$message.success(res.msg)
          }).catch(err => {
            this.$message.error(res.msg)
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.maine {
  margin: 50px 20px 10px 10px;
}
</style>

<style scoped>
/deep/ .el-form-item__label {
  font-size: 12px;
}
</style>